<template>
  <div id="max">
    <div id="top">

    </div>
    <div id="bottom">
      <div class="demo-type">
        <div>
          <el-avatar :size="100" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        </div>
      </div>
      <div class="username">
        用户名
      </div>
      <div class="intro">{{intro}}

      </div>

    </div>
    <div id="xia">
      <div id="kecheng">
        <el-tabs v-model="activeName"  @tab-click="handleClick">
          <el-tab-pane label="录播课" name="first" class="yanse">
            <div style="text-align: left;font-size: 15px;color: #999999;">共<span>110</span>个录播课程</div>




          </el-tab-pane>
          <el-tab-pane label="开源" name="second" class="yanse">无数据</el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "teacher",
    data(){
      return{
        intro:"多年移动互联网产品设计和开发经验，带领团队完成多个知名互联网产品，历任多家知名公司Java和大数据架构师，\n" +
          "          负责过多个大型Java和大数据系统的架构和开发。\n" +
          "          精通Java、Go、Python、Hadoop、Storm、Spark、Docker、NoSQL等语言和大数据技术，IT一线行业8年实战经验，\n" +
          "          目前已经出品《秒杀系统》《分布式任务调度》《数据统计分析系统》等教程，教程案例全部均来自真实工业界开发场景。\n" +
          "          对分布式、高并发、高可用、微服务、缓存、虚拟化、海量数据处理有丰富的实战经验和解决方案。"
      }
    }

  }
</script>

<style scoped>
  #max{
    position: relative;
  }
  #top{
    width: 100%;
    height: 150px;
    background-image: url("../../static/img/headimg/roletop.png");
    background-size: 100% 150px;
  }
  #bottom{
    width: 100%;
    height: 200px;
    background-color: white;
  }
  .demo-type{
    position: absolute;
    top: 29%;
    left: 12%;
  }
  .username{
    color: white;
    font-size: 18px;
    font-weight: bold;
    position: absolute;
    top: 34%;
    left: 20%;
  }
  .intro{
    text-align: left;
    width: 70%;
    color: #999999;
    font-size: 14px;
    position: absolute;
    top: 44%;
    left: 20%;
  }
  #kecheng>>>.el-tabs__nav-wrap::after{
    background-color: white;
  }
  #kecheng{
    height: 40px;
    width: 77.8%;
    background-color: white;
    position: absolute;
    top:-20%;
    left: 12%;
  }
  .yanse{
    background-color: #F5F5F5;
  }
  #xia{
    background-color: #F5F5F5;
    width: 100%;
    height: 200px;
    position: absolute;
  }
</style>
